<template>
  <div class="scholars-module" v-if="data.length"> 
    <div class="scholars-title">
      <img src="../assets/images/scholars-title.png" alt="">
    </div>
    <div class="scholars-content">
      <div class="scholars-info">
        <div class="explain">
          <div class="explain-title">{{data[initialSlide].title}}</div>
          <div class="explain-text">     
            {{data[initialSlide].description}}
          </div>
          <div class="explain-link-row">
            <a href="#" class="explain-link">【查看详情】</a>
          </div>
        </div>
        <div class="scholars-list">
          <Swiper
          :slides-per-view="4"
            :modules="[ $SwiperModules.Navigation]"
            :navigation="{ nextEl: '.custom-next', prevEl: '.custom-prev' }"
            @swiper="onSwiper"
            loop
            :speed="1000"
            @slideChange="onSlideChange"
            class="swiper-wrapper"
          >
            <SwiperSlide class="slide" v-for="(item,index) in data" :key="index">
              <div class="slide-item">
                <img :src="item.picUrl" class="slide-img" v-if="item.picUrl" />
                <div class="slide-name" v-else  @click="onChangeIndex(index)">{{item.title.charAt(0)}}</div>
                <!-- <img :src="item.picUrl" class="slide-img" @click="onChangeIndex(index)"/> -->
              </div>
            </SwiperSlide>
          </Swiper>
          <div class="custom-prev"></div>
          <div class="custom-next"></div>
        </div>
      </div>

      <div class="scholars-pic">
        <a href="" alt=""><img class="scholars-avatar" :src="data[initialSlide].picUrl" alt=""/></a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

  const  props = defineProps({
    data: {
      type: Array,
      default: []
    },
  })
  const initialSlide = ref(0)

  const onSwiper = (swiper) => {
    // 初始化时设置正确的 active slide
    initialSlide.value = swiper.realIndex
  };
  const onChangeIndex = (index) => {
    initialSlide.value = index
  };
  const onSlideChangeScholars = (swiper) => {
    
    console.log('slide change', swiper.realIndex);
  };
</script>
<style lang="scss" scoped>
.scholars-module { 
  height: 800px;
  background: url('../assets/images/scholars.png') no-repeat center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .scholars-title{
    margin-top: 30px;
  }
  .scholars-content{
    display: flex;
    margin-top: 58px;
    .scholars-info{
      width: 774px;
      .explain{
        width: 712px;
        height: 265px;

        .explain-title{
          color: #111111;
          line-height: 42px;
          font-size: 30px;
          font-weight: 500;
        }
        .explain-text{
          font-weight: 400;
          font-size: 18px;
          color: #393329;
          line-height: 34px;
          margin-top: 20px;
          text-indent: 2em;
          // 添加以下样式实现6行省略号效果
          display: -webkit-box;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .explain-link-row{
          display: flex;
          justify-content: flex-end;
          .explain-link{
            font-weight: 400;
            font-size: 18px;
            color: #B52628;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
      .scholars-list{
        margin-top: 42px;
        .slide{
          display: flex;
          justify-content: center;
          position: relative;
          .slide-item{
            width: 140px;
            height: 140px;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            .slide-img{
              width: 100%;
              height: 100%;
            }
            .slide-name{
              width: 100%;
              height: 100%;
              background: #98c543;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 36px;
            }
          }
           // 为当前激活的幻灯片添加样式
          &.swiper-slide-active {
            .slide-item {
              border: 3px solid #AC8144;
            }
          }
        }
        
        
        
        
      }
    }
    .scholars-pic{
      width: 498px;
      height: 403px;
      background: url('../assets/images/scholars-pic.png') no-repeat  top right;
      background-size: 411px 403px;
      .scholars-avatar{
        margin-top: 63px;
        width: 340px;
        height: 340px;
      }
    }
  }
}
</style>